<template>
  <div class="department">
    <je-panel>
      <je-panel-item>
        <je-tree
          ref="treeview"
          class="table-treeView"
          :search="{ style: 'height:40px;' }"
          :tree-config="{
            trigger: 'cell-dblclick',
            rowField: 'id',
            parentField: 'parent',
          }"
          :loading="loading"
          size="mini"
          :data="treeData"
          @search-select="doSearchChange"
          @current-change="handlerSelect"
        >
        </je-tree>
      </je-panel-item>
      <je-panel-item region="bottom" v-bind="options.bottom"> </je-panel-item>
      <je-panel-item region="tbar" v-bind="options.tbar">
        <je-toolbar space="0">
          <je-button type="text" @click="refresh">
            <i class="fal fa-sync"></i>刷新权限缓存
          </je-button>
        </je-toolbar>
      </je-panel-item>
    </je-panel>
  </div>
</template>

<script>
  import { defineComponent, onMounted, reactive, ref } from 'vue';

  import { Panel, Tree, Toolbar, Button, Modal } from '@jecloud/ui';

  import { loadDepartmentTreeApi } from '@/api';

  import VueEvent from '@/helper/model/event';

  export default defineComponent({
    name: 'Departmente',
    components: {
      JePanel: Panel,
      JePanelItem: Panel.Item,
      JeTree: Tree,
      JeButton: Button,
      JeToolbar: Toolbar,
    },
    setup() {
      // panel配置
      const options = reactive({
        // tabr样式
        tbar: {
          size: 40,
          style: {
            borderRight: '1px solid #e6e6e6',
            borderTop: '1px solid #e6e6e6',
            borderBottom: '1px solid #e6e6e6',
          },
        },
        bottom: {
          size: 40,
          style: {
            borderRight: '1px solid #e6e6e6',
          },
        },
      });
      const treeData = ref([]); // tree数据
      const treeview = ref('treeview'); // tree实例
      const loading = ref(false);

      onMounted(() => {
        loadDepartmentTreeEvent();
      });

      const refresh = () => {
        loadDepartmentTreeEvent('refresh');
        treeview.value.clearCurrentRow();
        current = null;
        VueEvent.emit('cleanData');
      };

      // 加载部门树
      const loadDepartmentTreeEvent = (flag) => {
        loading.value = true;
        let params = {};
        if (flag == 'refresh') {
          params = { refresh: '1' };
        }
        loadDepartmentTreeApi(params).then((res) => {
          treeData.value = res.children;
          loading.value = false;
          if (flag != 'refresh') {
            setTimeout(() => {
              treeData.value.forEach((item) => {
                const row = treeview.value.getRowById(item.id);
                treeview.value.setTreeExpand(row, true); // 展开当前项
              });
            }, 130);
          } else {
            Modal.notice('刷新权限缓存成功！', 'success');
          }
        });
      };

      // 选择部门
      let current = null;
      // 点击tree
      const handlerSelect = ({ row }) => {
        row.checked = true;
        // 当前项如果已被点击，代表取消选择
        if (row.id === current) {
          current = null;
          VueEvent.emit('cleanData');
        } else {
          if (row?.id) {
            current = row.id;
            // 不是department，还原数据
            if (row.nodeInfoType !== 'department') return VueEvent.emit('cleanData');
            // 否则展示account
            VueEvent.emit('showAccount', {
              _id: row.id,
              _type: 'department',
              _nodeType: 'DEPARTMENT',
            });
          }
        }
      };
      //搜索框选中事件
      const doSearchChange = ({ row }) => {
        handlerSelect({ row });
      };

      return { treeData, loading, options, handlerSelect, treeview, refresh, doSearchChange };
    },
  });
</script>

<style lang="less" scoped>
  .department {
    :deep(.table-treeView .je-panel-item-region-default) {
      border-right: 1px solid #e6e6e6;
    }
    :deep(.table-treeView .je-tree-search-wrapper > *) {
      height: 40px;
      .ant-input-clear-icon {
        top: 10px;
      }
    }
    :deep(.table-treeView .ant-input-affix-wrapper-focused.ant-select-selection-search-input) {
      border: 1px solid #5c8dff;
    }
    :deep(.table-treeView .ant-input-affix-wrapper.ant-select-selection-search-input) {
      border-top: 1px solid #ffffff;
      &:hover {
        border-top: 1px solid #5c8dff;
        .ant-input-prefix {
          margin-top: -0.5px;
        }
      }
    }
  }
</style>
